<script setup lang="ts">
import findAuthor from "./findAuthor.vue";
import findRead from "./findRead.vue";
import findImage from "./findImage.vue";
import FindSpecial from "./findSpecial.vue";
import FindQuestion from "./findQuestion.vue";
import findNote from "./findNote.vue";
import { useStore } from "vuex";
import { ref, computed } from "@vue/reactivity";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
let date = new Date();
const props = defineProps({
  name: String,
});
let year = ref<number>(date.getFullYear());
let month = ref<string>(
  date.getMonth() + 1 >= 10
    ? date.getMonth() + 1 + ""
    : "0" + (date.getMonth() + 1)
);
let read_show = computed(() => store.state.read_show);
let publish_show = computed(() => store.state.publish_show);
let topublish = () => {
  router.push({ name: "publish" });
};
</script>

<template>
  <teleport to="#app" v-if="read_show">
    <div class="scoll-time-now">
      {{ year }}年{{ month }}月
      <span class="iconfont icon-xiala"></span>
    </div>
  </teleport>
  <teleport to="#app" v-if="publish_show">
    <div class="iconfont icon-jia" @click="topublish"></div>
  </teleport>
  <div class="findViewContainer" id="findView">
    <div v-if="name == '作者'">
      <find-author />
    </div>
    <div v-else-if="name == '阅读'">
      <find-read />
    </div>
    <div v-else-if="name == '图文'">
      <find-image />
    </div>
    <div v-else-if="name == '专题'">
      <find-special />
    </div>
    <div v-else-if="name == '问答'">
      <find-question />
    </div>
    <div v-else-if="name == '小记'">
      <find-note />
    </div>
    <div v-else>
      <van-empty description="更多专栏期待中~" />
    </div>
  </div>
</template>

<style>
.findViewContainer {
  margin-top: 45px;
  min-height: calc(100vh - 100px);
}
</style>